<template>
  <div class="play-container">
        <div class="play-content">
            <div class="slider">
                <input
                    type="range"
                    :min="min"
                    :max="max"
                    v-model="curTime"
                    @input="updateValue"
                />
            </div>
            <div class="slider-button">
                <span v-if="!isPlay" @click="handlePlayStart(true)">播放</span>
                <span v-else @click="handlePlayStart(false)">暂停</span>
                <span @click="handlePlayStop">停止</span>
                <div style="display: flex;margin-left: 20px;"><span class="dqsjTime">{{ dqsjTime }}</span>/<div class="dqsjTime">{{ jszcTime }}</div></div>
                <span class="time_huifang">回放时刻 {{ time_huifang  }}</span>
                <span>倍速</span>
                <span v-for="(item,index) in suduList" :key="item" :style="{'color':index === isSpeed?'#008EDE':''}" @click="handleClickSU(item,index)">{{ item }}X</span>
            </div>
        </div>
  </div>
</template>

<script>
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn'; // 引入中文语言包
export default {
  props: {
    timeStart:{
      type:String,
      default:'',
    },
    longTime:{
      type:Number,
      default:0
    },
    pointsData:{
      type:Array,
      default:()=>[]
    },
  
    onChange3D:{
      type:Function,
      default:()=>{}
    },
    value: {
        type: Number,
        default: 30
      },
    min: {
        type: Number,
        default: 0
    },
    onClearCanvas:{
      type:Function,
      default:()=>{}
    }
  },
  data(){
    return {
      dataList:[], // 点数据
      xuanranPoints:[

      ], //缓存数据
      isSpeed:1, // 当前倍速
       max:10000, // 最大播放长度
       isPlay:false,
       suduList:[0.5,1,2,4,6,8,32],
        sliderValue: this.value,
        jszcTime:'00:00:00',
        dqsjTime:'00:00:00',
        time_huifang:'',
        setInterval:null  ,
        curTime:0, // 当前播放进度
        j:0,
        stamp_start0:null // 轨迹起始时刻

    }
  },
  created(){},
  methods:{
    handleClickSU(val,index){
        // this.$emit('update:isSpeed',index)
      this.isSpeed = index
      clearInterval(this.setInterval)
      // this.handlePlayStart
      this.handlePlayStart(true)
    
    },
    // 停止播放
    handlePlayStop(){
      clearInterval(this.setInterval)
      this.curTime = 0
      this.dqsjTime = this.formatDuration(0)
      this.isPlay = false

    },
    updateValue(event) {
      this.onClearCanvas()
      // 创建所需要数据
      this.dqsjTime = this.formatDuration(this.curTime)
     
       const dataList = this.dataList
      //  从早7点开始
      const stamp_start0 =  this.stamp_start0 // 第一个时间戳
      //  this.curTime =   Number(this.curTime) + 1000
         const stamp_cur =   Number(this.curTime) + stamp_start0 // 当前的时间戳
         this.time_huifang =  dayjs(stamp_cur).format('YYYY-MM-DD HH:mm:ss')
             this.dqsjTime =  this.formatDuration(this.curTime) // 没问题
              // 多人多轨迹
              for(let [indexP,people] of Object.entries(dataList)){
                  // 轨迹 
                   people.xuanranPoints=  [] // [x,y,z,x,y,z]
                   people.j =  0
                   people.NeedUpdate = false
                  // 预警
                  people.xuanranPoints_waring = [] // [(x,y,z),(x,y,z)]
                  people.w =  0
                  people.NeedUpdate_waring = false
                  people.xuanranPoints_waring_time = []
                  // 遍历所有轨迹
                for(let i = people.j; i< people.timeStamps.length;i++){
                  // console.log('people'+indexP,people.timeStamps[i],stamp_cur);
                  
                  if(people.timeStamps[i]  <= stamp_cur){
                    people.xuanranPoints.push(people.points[i].x + indexP,people.points[i].y+indexP,0 )
                    people.NeedUpdate = true
                  }else{
                    // 找不到点了  返回
                    people.j = i
                    break;
                  }
                }
                // 遍历预警点
                for(let i = people.w; i< people.timeStamps_waring.length;i++){
                  const xyz = people.points_waring[i]
                  if(people.timeStamps_waring[i]  <= stamp_cur){
                    people.xuanranPoints_waring.push(xyz)
                    people.xuanranPoints_waring_time.push(people.times_waring[i])
                    people.NeedUpdate_waring = true
                    // console.log(people.times_waring[i],people.xuanranPoints_waring);
                  }else{
                    people.w = i
                    break;
                  }
                }
              }
              console.log('最新数据',this.dataList);
              
                // 监听到改动画线
              this.onChange3D(dataList)
      //  this.handlePlayStart(true) 
      },
    // 创建渲染数据
    getLinePoints(){
      let timp = 1000 / this.suduList[this.isSpeed] 
      // let timp = 1000 * 30
       // 这里要播放了
       const dataList = this.dataList
      //  从早7点开始
      const stamp_start0 =  this.stamp_start0 // 第一个时间戳
      if(this.setInterval){
        clearInterval(this.setInterval)
      }
       this.setInterval = setInterval(()=>{
            this.curTime =   Number(this.curTime) + 1000
         const stamp_cur =   Number(this.curTime) + stamp_start0 // 当前的时间戳
         this.time_huifang =  dayjs(stamp_cur).format('YYYY-MM-DD HH:mm:ss')
             this.dqsjTime =  this.formatDuration(this.curTime) // 没问题
              // 多人多轨迹
              for(let [indexP,people] of Object.entries(dataList)){
                  // 轨迹 
                   people.xuanranPoints= people.xuanranPoints || [] // [x,y,z,x,y,z]
                   people.j = people.j || 0
                   people.NeedUpdate = false
                  // 预警
                  people.xuanranPoints_waring = people.xuanranPoints_waring || [] // [(x,y,z),(x,y,z)]
                  people.w = people.w || 0
                  people.NeedUpdate_waring = false
                  people.xuanranPoints_waring_time = []
                  // 遍历所有轨迹
                for(let i = people.j; i< people.timeStamps.length;i++){
                  // console.log('people'+indexP,people.timeStamps[i],stamp_cur);
                  
                  if(people.timeStamps[i]  <= stamp_cur){
                    people.xuanranPoints.push(people.points[i].x + indexP,people.points[i].y+indexP,0 )
                    people.NeedUpdate = true
                  }else{
                    // 找不到点了  返回
                    people.j = i
                    break;
                  }
                }
                // 遍历预警点
                for(let i = people.w; i< people.timeStamps_waring.length;i++){
                  const xyz = people.points_waring[i]
                  if(people.timeStamps_waring[i]  <= stamp_cur){
                    people.xuanranPoints_waring.push(xyz)
                    people.xuanranPoints_waring_time.push(people.times_waring[i])
                    people.NeedUpdate_waring = true
                    // console.log(people.times_waring[i],people.xuanranPoints_waring);
                  }else{
                    people.w = i
                    break;
                  }
                }
              }
                // 监听到改动画线
                this.onChange3D(dataList)
              if(this.curTime >= this.max){
                clearInterval(this.setInterval)
                this.isPlay = false
              }
        },timp)

    },
    // 开始播放  暂停播放
    handlePlayStart(flg){
        this.isPlay = flg
        if(flg){
          this.getLinePoints()
        }
        if(!flg){
          clearInterval(this.setInterval)
        }
    },
 
     formatDuration(diffMilliseconds) {
         const totalSeconds = diffMilliseconds / 1000; // 微秒 -> 秒
         const hours = Math.floor(totalSeconds / 3600);
         const minutes = Math.floor((totalSeconds % 3600) / 60);
         const seconds = Math.floor(totalSeconds % 60);
         return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
       },
  },
  watch: {
      value(newValue) {
        this.sliderValue = newValue;
      },
      longTime(newValue){
        this.max = newValue
        this.jszcTime = this.formatDuration(newValue)

      },
      timeStart(newValue){
        this.time_huifang = newValue
        this.stamp_start0 =  new Date(newValue).getTime()  // 2024-11-10 20:18:56
      
      },
      pointsData(newValue){
        this.handlePlayStop()

      
        if(newValue.length > 0){
            this.dataList = newValue
        }
      }
    }
  
}
</script>

<style scoped lang="scss">
.play-container {
  padding: 0 1rem; 
  box-sizing: border-box;
 cursor: pointer;
 user-select:none;
  height: 60px;
  width: 100%;
  display: inline-flex;
  flex-flow: column nowrap;
  align-items: center;
}
.play-content{
    height: 60px;
    padding: 0 20px;
    background-color: #fff;
    width: 98%;
    .dqsjTime{
      width: 68px;
     
    }
    .slider{
     
    }
    .time_huifang{
      width: 220px;
    }
    .slider-button{
      display: flex;
      color: #353535;
        margin-top: 6px;
        span:not(:nth-child(1)){
           margin-left: 10px;
        }
      
    }
}

/*横条样式*/
input[type=range] {
  -webkit-appearance: none;/*清除系统默认样式*/
  width: 100%;
  background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
  background-size: 100% 100%;/*设置左右宽度比例*/
  height: 3px;/*横条的高度*/
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;/*清除系统默认样式*/
  height: 20px;/*拖动块高度*/
  width: 20px;/*拖动块宽度*/
  background: #fff;/*拖动块背景*/
  border-radius: 50%; /*外观设置为圆形*/
  border: solid 1px #ababab; /*设置边框*/
}



</style>